<template>
    <div class="VideoCheck" v-loading="loading">
        <!--      头-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">课程详情</p>
        </Top>
        <div class="main">
            <cube-scroll>
                <div v-if="intro_video">
                    <!--视频海报-->
                    <div class="poster" v-show="!videoShow">
                        <img :src="videoPoster" alt="" />
                        <div class="mask">
                            <img
                                 @click="playVideo()"
                                 class="playBtn"
                                 src="../../assets/play.png"
                                 alt="" />
                        </div>
                    </div>
                    <!--           视频块-->
                    <div class="video" v-show="videoShow">
                        <video-player  class="video-player vjs-custom-skin"
                                      ref="videoPlayer"
                                      :playsinline="true"
                                      :options="playerOptions"
                                      @play="onPlayerPlay($event)"
                                      @pause="onPlayerPause($event)">
                        </video-player>
                    </div>
                </div>
                <!--            标题 收藏块-->
                <h3 class="title-fa" v-if="intro_video">
                    {{intro_video.video_name}}
                </h3>
                <!--            tab切换-->
                <ul class="de-tab">
                    <li :class="{on:tabIndex==1}" @click="tabIndex=1">简介<i class="el-icon-loading" v-if="icon1"></i></li>
                    <li :class="{on:tabIndex==2}" @click="switchTab(2)">选集({{intro_lession.videonum}})<i class="el-icon-loading" v-if="icon2"></i></li>
                </ul>
                <!--            组件群-->
                <!--花艺师信息-->
                <div class="teacher-about" v-if="tabIndex==1">
                    <!--       lesson Info-->
                    <div class="lessonInfo animated flipInX" style="animationDelay:0s">
                        <h4>{{intro_lession.lession_name}}</h4>
                        <div class="sec">
                            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-bofang"></use></svg>&#8197;{{intro_lession.lession_view}}&emsp;
                            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shijian"></use></svg>&#8197;{{intro_lession.lession_num_hour}}课时&emsp;
                            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-star"></use></svg>&#8197;{{intro_lession.lession_level}}
                        </div>
                        <div class="thr">
                            开课时间：{{intro_lession.lession_time}}  {{intro_lession.lession_update_time}}&emsp;&emsp;<span style="color:#eb5b29;">{{intro_lession.buynum}}</span>人参与学习
                        </div>
                    </div>
                    <!--        teacher info-->
                    <div class="teacherInfo animated flipInX" style="animationDelay:0.1s">
                        <img :src="intro_teacher.teacher_img" alt="" class="teacherImg">
                        <div class="teacherDetail">
                            <h3 >{{intro_teacher.teacher_name}}</h3>
                            <p class="level">{{intro_teacher.teacher_level}}</p>
                            <p class="instro">
                                {{intro_teacher.teacher_desc}}
                            </p>
                        </div>
                    </div>
                    <!--        课程介绍-->
                    <div class="lessonDetail animated flipInX" style="animationDelay:0.2s" v-html="intro_lession.lession_desc"></div>
                </div>

                <!--选集-->
                <div class="selections" v-loading="loading" v-if="tabIndex==2">
                    <ul class="lists" v-if="video_list.length>0">
                        <router-link tag="li"
                                     :to="{path:'detail',query:{lession_id:$route.query.lession_id,member_id:getMemberId(),video_id:item.video_id}}"
                                     class="clearfix animated flipInX"
                                     :style="{animationDelay:delay(index)}"
                                     v-for="(item,index) in video_list"
                                     :key="index"
                                     v-if="video_list.length>0">
                            <div class="left imgWrap">
                                <img class="imgFull" :src="item.video_img" alt="">
                                <svg class="icon playIcon" aria-hidden="true"><use xlink:href="#icon-bofang"></use></svg>
                            </div>
                            <div class="infos">
                                <h4 class="tit"><span class="end" v-if="item.is_buy===0">试看</span>{{item.video_name}}</h4>
                                <b class="time">{{item.add_time}}</b>
                                <p class="admin">{{item.teacher_name}}&emsp;{{item.teacher_level}}<span class="right"></span></p>
                                <div class="other">
                                    <span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bofang"></use></svg>&#8197;{{item.video_view}}</span>
                                    <span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shalou"></use></svg>&#8197;{{item.video_time}}</span>
                                    <!--<span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-iconfontpinglun"></use></svg>&#8197;{{item.comment_num}}</span>-->
                                    <span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>&#8197;{{item.praise_num}}</span>
                                </div>
                            </div>
                        </router-link>
                    </ul>
                    <!--无数据-->
                    <div class="nodataCus animated flipInY" v-if="video_list.length<=0">
                        <!--<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wushuju"></use>
</svg>-->
                        <img src="../../assets/huawa-off.png" alt="" />
                        <p>暂无数据..</p>
                    </div>
                </div>
            </cube-scroll>
        </div>

    </div>
</template>

<script>
    //引入 vue video 组件
    import { videoPlayer } from 'vue-video-player';
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    import About from '@/components/detailVues/About' //详情页简介组件
    import Selections from '@/components/detailVues/Selections' //详情页选集组件
    export default {
        name: 'VideoCheck',
        components: {
            Top,//顶部信息组件
            About, //详情页简介组件
            Selections,//详情页选集组件
            videoPlayer,//vue video 组件
        },
        data () {
            return {
                videoShow:false,//视频默认不显示
                videoPoster:null,
                //video 配置
                playerOptions: {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false,
                    muted: false, // 默认情况下将会消除任何音频。http://suyiimg.j7cms.com/t1/index.m3u8
                    loop: false, // 循环播放。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "application/x-mpegURL",
                        src: "" //你的m3u8地址（必填）
                    }],
                    poster: "", //你的封面地址
                    width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                },

                loading:false,//加载动画
                sourceLoading:false,//video source标签动态渲染
                controls:false,//视频控件是否显示
                videoMask:true,//视频遮罩
                videoUrl:'',//视频地址
                netType:'',//测试
                isFa:false,//是否收藏
                tabIndex:1,//默认选中简介



                /*tab切换动画组*/
                icon1:false,
                icon2:false,
                icon3:false,

                /*简介数据*/
                intro_lession:{},
                intro_teacher:{},
                intro_video:{},

                /*选集数据*/
                video_list:[],

            }
        },
        watch: {
            /*监听路由query变化 刷新页面*/
            '$route': function (route) {
                var query = route.query;
                this.$router.go(0);
            }
        },
        created(){
            /*初始化获取简介等基本信息*/
            let data = this.detailRoute();
            this.loading = true;
            this.sourceLoading = false;
            this.Posthttp('/?method=flower.index.mylessionInfo',data,(res)=>{
                this.loading = false;
                if(JSON.parse(res.bodyText).status===1){
                    this.intro_lession = JSON.parse(res.bodyText).data.lession || {};
                    this.intro_teacher = JSON.parse(res.bodyText).data.teacher || {};
                    this.intro_video = JSON.parse(res.bodyText).data.video || {};
                    this.videoPoster = JSON.parse(res.bodyText).data.video && JSON.parse(res.bodyText).data.video.video_img || null;
                    this.playerOptions.sources[0].src = JSON.parse(res.bodyText).data.video && JSON.parse(res.bodyText).data.video.video_url || '';
                }else{
                    this.$message.warning({duration:1000,message:JSON.parse(res.bodyText).msg})
                }

            });
        },
        computed: {
            player() {
                return this.$refs.videoPlayer.player
            }
        },
        methods:{
            //顶部返回
            backUpload(){
            },
            //播放视频
            playVideo(){
                this.videoShow = true;
                this.player.play();
            },
            onPlayerPlay(player) {//监听视频播放
            },
            onPlayerPause(player){//监听视频暂停
            },
            //详情页切换
            switchTab(num){
                //if(this.tabIndex === num)return;
                if(num === 2){//选集数据获取
                    this.icon2 = true;
                    this.Posthttp('/?method=flower.index.videolist',{lession_id:this.intro_lession.lession_id,member_id:this.getMemberId()},(res)=>{
                        this.icon2 = false;
                        this.tabIndex = num;
                        if(JSON.parse(res.bodyText).status === 0){
                            this.video_list=[];
                        }else if(JSON.parse(res.bodyText).status === 1){
                            this.video_list = JSON.parse(res.bodyText).data.video_list;
                        }
                    })
                }
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .main{
        bottom: 0;
    }
    .VideoCheck {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /*视频海报*/
        .poster{
            position: relative;
            img{
                width: 100%;
                height: auto;
                display: block;
                font-size: 0;
            }
            .mask{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0,0,0,.4);
                z-index: 9;
            }
            .playBtn{
                width: 1rem;
                height: 1rem;
                position: absolute;
                left: calc(50% - .5rem);
                top: calc(50% - .5rem);
                z-index: 10;
            }
        }
        /*视频*/
        .video{
            width: 100%;
            position: relative;
            overflow: hidden;
            video{
                width: 100%;
                height: auto;
            }
        }
        /*标题 收藏*/
        .title-fa{
            height: .8rem;
            line-height: .8rem;
            padding-right: 20%;
            padding-left: .2rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            color: #333;
            background-color: #f9f9f9;
            .fa{
                font-size: .4rem;
                position: absolute;
                right: .2rem;
                top: calc(50% - .2rem);
                color: #999;
                &.on{
                    color: #eb5b29;
                }
            }
            /*收藏动画*/
            .fa-fade{
                position: absolute;
                right: .2rem;
                top: 0;
                font-size: .4rem;
                color: #eb5b29;
                transition: all .5s;
                animation: fadeup .7s linear;
                opacity: 0;
                z-index: 60;
            }
        }
        /*直播*/
        .hls{
            padding: .22rem .2rem;
            font-size: .22rem;
            line-height: .38rem;
            .time{
                color: #999;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .info{
                color: #333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        /*详情页内切换表*/
        .de-tab{
            display: flex;
            justify-content: space-around;
            border-top: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;
            font-size: .28rem;
            li{
                height: 1rem;
                line-height: 1rem;
                padding: 0 .26rem;
                &.on{
                    color: #eb5b29;
                    border-bottom: 1px solid #eb5b29;
                }
                .el-icon-loading{
                    color: #eb5b29;
                    margin-left: .04rem;
                }
            }
        }
        /*底部*/
        /*未购买*/
        .notbuy{
            width: 100%;
            position: fixed;
            bottom: 0;
            height: 1rem;
            line-height: 1rem;
            border-top: 1px solid #e4e4e4;
            li{
                float: left;
                &.price{
                    width: 67%;
                    padding-left: .2rem;
                    span{
                        font-size: .36rem;
                        color: #eb5b29;
                        vertical-align: -.04rem;
                        margin-right: .02rem;
                    }
                }
                &.buy{
                    width: 33%;
                    text-align: center;
                    background-color: #eb5b29;
                    color: #fff;
                    font-size: .28rem;
                    letter-spacing: 1px;
                }
            }
        }
        /*已购买*/
        .isbuy{
            width: 100%;
            position: fixed;
            bottom: 0;
            height: 1rem;
            line-height: 1rem;
            border-top: 1px solid #e4e4e4;
            background-color: #f5f5f5;
            padding: 0 .2rem;
            display: flex;
            justify-content: space-between;
            /*输入框*/
            input{
                width: 76%;
                height: .7rem;
                border-radius: .4rem;
                margin-top: .15rem;
                border: 1px solid #e4e4e4;
                outline: 0;
                padding-left: .3rem;
                padding-right: 1.1rem;
            }
            .post{
                position: absolute;
                left: 60%;
            }
            /*评论*/
            .comment{
                width: auto;
                height: 100%;
                display: flex;
                flex-flow: column wrap;
                justify-content: center;
                text-align: center;
                .icon{
                    font-size: .36rem;
                }
                p{
                    line-height: 1;
                    &:last-child{
                        margin-top: .05rem;
                    }
                }
            }
            /*点赞*/
            .thumbs{
                @extend .comment;
                &.on{
                    color: #eb5b29;
                }
                .thumb-fade{
                    position: absolute;
                    left: 0;
                    top: 0;
                    color: #eb5b29;
                    transition: all .5s;
                    animation: fadeup .6s linear;
                    opacity: 0;
                    z-index: 20;
                }
            }
        }
        /*购买弹窗*/
        .mask{
            background-color: rgba(0,0,0,.2);
        }
        /**/
        .mask-content{
            width: 90%;
            min-height: 4rem;
            position: absolute;
            left: 0;
            right: 0;
            top: 30%;
            margin: auto;
            padding: 0 0 .3rem;
            background-color: #fff;
            border-radius: .1rem;
            animation-duration: .4s;
            h3{
                text-align: center;
                line-height: 1rem;
                border-bottom: 1px solid rgba(226, 85, 35,.4);
                margin-bottom: .4rem;
                font-size: .28rem;
                color: #333;
                font-weight: 600;
            }
            .payH3{
                border-bottom: 1px solid #e4e4e4;
            }
            .close{
                position: absolute;
                right: .2rem;
                top: -.08rem;
                font-size: .4rem;
            }
            p{
                padding: 0 .2rem;
                margin-bottom: .3rem;
                color: #777;
                font-size: .26rem;
            }
            .buyBtn{
                width: 3rem;
                font-size: .28rem;
                margin-top: .6rem;
            }
            /*余额不足*/
            .notEnough{
                position: absolute;
                bottom: -1rem;
                left: calc(50% - 2rem);
                width: 4rem;
                height: .6rem;
                line-height: .6rem;
                background-color: #333;
                color: #edb53c;
                text-align: center;
                border-radius: .1rem;
            }
            /*支付密码*/
            .pwdInp{
                width: 100%;
                padding: 0 .2rem;
                input{
                    width: 100%;
                    border: 1px solid #e4e4e4;
                    height: .8rem;
                    padding-left: .3rem;
                    outline: none;
                }
            }
        }
        .teacher-about {
            background-color: #f2f2f2;
            /*lessonInfo*/
            .lessonInfo{
                background-color: #fff;
                padding: .3rem .2rem;
                line-height: .36rem;
                h4{
                    font-size: .28rem;
                    color: #333;
                }
                .sec{
                    font-size: .2rem;
                    margin-top: .2rem;
                    .icon{
                        font-size: .28rem;
                        vertical-align: -.05rem;
                    }
                }
                .thr{
                    font-size: .2rem;
                    margin-top: .2rem;
                }
            }
            /*teacherInfo*/
            .teacherInfo{
                background-color: #fff;
                margin-top: .2rem;
                padding: .4rem .2rem;
                position: relative;
                .teacherImg{
                    width: 1.2rem;
                    height: 1.2rem;
                    border-radius: 100%;
                    float: left;
                }
                .teacherDetail{
                    margin-left: 1.2rem;
                    padding-left: .2rem;
                    color: #777;
                    h3{
                        font-size: .3rem;
                        color: #333;
                    }
                    .in{
                        font-size: .4rem;
                        color: #333;
                    }
                    .level{
                        margin-top: .2rem;
                    }
                    .instro{
                        line-height: .38rem;
                        margin-top: .3rem;
                        text-align: justify;
                    }
                }
                .gz{
                    position: absolute;
                    width: 1.3rem;
                    height: .6rem;
                    line-height: .6rem;
                    text-align: center;
                    border: 1px solid #777777;
                    border-radius: .06rem;
                    top: .5rem;
                    right: .36rem;
                    z-index: 10;
                    &.on{
                        border: 1px solid #e7470e;
                        color: #e7470e;
                    }
                }
            }
            /*课程介绍*/
            .lessonDetail{
                padding: .4rem .2rem;
                background: #fff;
                margin-top: .2rem;
                line-height: .4rem;
            }
        }
        .selections {
            /*选集列表*/
            .lists{
                overflow-x: hidden;
                padding: 0 .2rem;
                position: relative;
                li{
                    width: 100%;
                    padding:.34rem 0;
                    border-bottom: 1px solid #e4e4e4;
                    /*                    animation-duration:1.4s;*/
                    &:last-child{
                        border-bottom: 0;
                    }
                    /*左侧图片*/
                    .imgWrap{
                        width: 1.88rem;
                        height: 1.35rem;
                        position: relative;
                        .playIcon{
                            position: absolute;
                            font-size: .5rem;
                            top: calc(50% - .25rem);
                            left: calc(50% - .25rem);
                            color: #eb5b29;
                            font-weight: 600;
                        }
                    }
                    /*右侧信息*/
                    .infos{
                        margin-left: 1.88rem;
                        padding-left: .2rem;
                        position: relative;
                        /*标题*/
                        .tit{
                            color: #333;
                            width: 60%;
                            line-height: .38rem;
                            margin-bottom: .24rem;
                            span.end{
                                display: inline-block;
                                height: 100%;
                                font-size: .28rem;
                                padding: 0 .12rem;
                                border-radius: .06rem;
                                margin-right: .1rem;
                                color: #fff;
                                background-color: #00a42a;
                            }
                        }
                        /**/
                        .time{
                            position: absolute;
                            right: 0;
                            top: .1rem;
                            font-size: .2rem;
                        }
                        /*老师*/
                        .admin{
                            color: #777;
                            margin-bottom: .28rem;
                            font-size: .22rem;
                        }
                        /*其他*/
                        .other{
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: baseline;
                            font-size: .22rem;
                            .icon{
                                font-size: .3rem;
                                vertical-align: -.06rem
                            }
                        }
                        /*开课时间*/
                        .starttime{
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            margin-top: .2rem;
                            font-size: .2rem;
                        }
                    }
                }
            }
            /*无数据*/
            .nodataCus{
                text-align: center;
                color: #999;
                font-size: .28rem;
                margin-top: .2rem;
                .icon{
                    font-size: 2rem;
                }
            }
        }
    }
    /*点赞动画*/
    @keyframes fadeup{
        0{
            top: 0;
            opacity: 1;
            transform: scale(1);
        }
        50%{
            top: -.4rem;
            opacity: 0.5;
            transform: scale(1.1);
        }
        100%{
            top: -.6rem;
            opacity: 0;
            transform: scale(1.2);
        }
    }
</style>
